<template>
    <!--表单组件:并非行内-->
    <el-form label-width="80px">
        <el-form-item label="SPU名称"> xxxxxx </el-form-item>
        <el-form-item label="SKU名称">
            <el-input placeholder="请你输入SKU名称"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input type="number" placeholder="价格(元)"></el-input>
        </el-form-item>
        <el-form-item label="重量(千克)">
            <el-input type="number" placeholder="重量(千克)"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
            <el-input type="textarea" placeholder="规格描述"></el-input>
        </el-form-item>
        <!--平台属性-->
        <el-form :inline="true">
            <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr, index) in saleArr" :key="saleAttr.id">
                <el-select v-model="saleAttr.saleAttrIdAndValueId">
                    <el-option :label="item.saleAttrValueName" :value="`${saleAttr.id}:${item.id}`"
                        v-for="(item, index) in saleAttr.spuSaleAttrValueList" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-form-item label="销售属性">
            <!--行内form:因为一行放置多个select-->
            <el-form :inline="true">
                <el-form-item label="手机系统">
                    <el-select>
                        <el-option label="安卓" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机系统">
                    <el-select>
                        <el-option label="安卓" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片列表">
            <el-table border>
                <el-table-column width="80" type="selection"></el-table-column>
                <el-table-column label="图片"></el-table-column>
                <el-table-column label="名称"></el-table-column>
                <el-table-column label="操作"></el-table-column>
            </el-table>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" size="default">保存</el-button>
            <el-button size="default" @click="emit('changeScene', { scenes: 0, flag: '' })">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue'
import { reqAttrList, reqSpuHasSaleAttr, reqImgList } from '@/api/product/spu/spu'

//存储平台属性
let attrArr = ref([])
//存储图片列表
let imgArr = ref([])
//存储销售属性 
let saleArr = ref([])
//要发送给服务器的数据
let skuParams = ref({
    //父组件传递过来参数
    category3Id: 0, //三级分类的ID
    spuId: 0, //SPU的ID
    tmId: 0, //spu的品牌的ID
    //v-model收集
    skuName: "", //sku的名字
    price: 0, //sku的价格
    weight: "", //sku的重量
    skuDesc: "", //sku的描述
    skuDefaultImg: "", //默认图片地址
    skuAttrValueList: [
        //平台属性
        // {
        //   attrId: 0, //属性的id
        //   valueId: 0, //属性值的ID
        // },
    ],
    skuSaleAttrValueList: [
        //销售属性
        // {
        //   saleAttrId: 0,
        //   saleAttrValueId: 0,
        // },
    ],
});

//获取数据的方法
const initSku = async (c1Id: number | string, c2Id: number | string, spu: any) => {
    //收集三级分类的ID|SPUID|TMID
    skuParams.value.category3Id = spu.category3Id;
    skuParams.value.spuId = spu.id;
    skuParams.value.tmId = spu.tmId;
    //发请求
    let result1 = await reqAttrList(c1Id, c2Id, spu.id);
    let result2 = await reqSpuHasSaleAttr(spu.id);
    let result3 = await reqImgList(spu.id);
    //存储数据
    attrArr.value = result1
    imgArr.value = result3
    saleArr.value = result2
    console.log(attrArr)
}

//对外暴露
defineExpose({ initSku })
let emit = defineEmits(["changeScene"]);
</script>

<style scoped>

</style>